<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <el-form :inline="true" label-width="140px">
          <el-form-item label="选择车间：">
            <el-select v-model="selectWorkshop" placeholder="请选择" size="small" @change="changeWorkshop">
              <el-option
                v-for="item in workshopOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择设备：">
            <el-select v-model="selectDevice" placeholder="请选择" size="small" @change="draw">
              <el-option
                v-for="item in deviceOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-container>
      <el-aside width="30%">
        <!--设备利用率-->
        <div id="devUseRate"
                :style="{width: '100%', height: '220px', background: '#F5F5F5'}">
        </div>
        <!--历史生产记录-->
        <div style="background: #fff;">
          <center style="font-weight:bold;">近期任务状况</center>
          <el-table :data="taskHis" border style="width: 100%" size="mini">
            <el-table-column prop="taskNo" label="任务">
            </el-table-column>
            <el-table-column prop="productionName" label="品名">
            </el-table-column>
            <el-table-column prop="count" label="当前产量">
            </el-table-column>
            <el-table-column prop="finishTime" label="完成时间">
            </el-table-column>
          </el-table>
        </div>
      </el-aside>
      <el-main style="background: #DDDDDD">
        <h6 style="text-align: center;">设备运行参数</h6>
        <el-form :model="deviceRunParams" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="射嘴温度：">
                {{deviceRunParams.nozzleTemperature}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="一区温度：">
                {{deviceRunParams.oneTemperature}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二区温度：">
                {{deviceRunParams.twoTemperature}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="三区温度：">
                {{ deviceRunParams.threeTemperature }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="四区温度：">
                {{deviceRunParams.fourTemperature}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="油箱温度：">
                {{deviceRunParams.tankTemperature}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="射出压力：">
                {{deviceRunParams.injectionPressure}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="射出速度：">
                {{ deviceRunParams.injectionSpeed }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="模座压力：">
                {{deviceRunParams.dieBasePressure}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="模座速度：">
                {{deviceRunParams.dieBaseSpeed}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="托模压力：">
                {{deviceRunParams.supportingMouldPressure}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="托模速度：">
                {{ deviceRunParams.supportingMouldSpeed }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="储料压力：">
                {{deviceRunParams.storagePressure}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="储料速度：">
                {{deviceRunParams.storageSpeed}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="全程计时：">
                {{deviceRunParams.allTime}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="动作计时：">
                {{ deviceRunParams.actionTime }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="射出位置：">
                {{deviceRunParams.injectionPosition}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="模座位置：">
                {{deviceRunParams.dieBasePosition}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="托模位置：">
                {{deviceRunParams.supportingMouldPosition}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="坐台位置：">
                {{ deviceRunParams.sittingStagePosition }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="储料转数：">
                {{ deviceRunParams.materialStorageCount }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开模次数：">
                {{ deviceRunParams.moldOpeningTimes }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开模频率：">
                {{ deviceRunParams.moldOpeningFrequency }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-aside width="20%">
        <!--月度任务达成率-->
        <div :style="{width: '100%', height: '250px', background: '#FFFFFF'}">
          <center style="font-weight:bold;">月度任务达成率</center>
          <el-table :data="taskCompleteRate.list" border style="width: 100%" size="mini">
            <el-table-column type="index" width="25px"></el-table-column>
            <el-table-column prop="taskName" label="任务编号">
            </el-table-column>
            <el-table-column prop="completeRate" label="达成率">
            </el-table-column>
          </el-table>
        </div>
        <!--当前任务生产进度-->
        <div id="devTask"
                :style="{width: '100%', height: '220px', background: '#F5F5F5'}">
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
  import {
    workshopsByRole,
    deviceByWorkshop,
    deviceUseRate,
    deviceTaskProgress,
    devRunParams,
    taskHisWithDev,
    taskCompleteRate
  } from '@/api/workshop';

export default {
  name: 'devBoard',
  data() {
    return {
      selectWorkshop: null, //选择车间
      selectDevice: null,   //选择设备
      workshopOptions: [],
      deviceOptions: [],
      deviceRunParams: {},
      taskHis: [],
      taskCompleteRate: []
    }
  },
  created(){
    this.workshopSelects();
  },
  beforeDestroy(){
    this.clearTimer()
  },
  methods: {
    workshopSelects() {
      workshopsByRole().then(response=>{
        this.workshopOptions = response.data;
      })
    },
    changeWorkshop() {
      deviceByWorkshop({workshopId: this.selectWorkshop}).then(response=>{
        this.deviceOptions = response.data;
      })
    },
    draw() {
      this.drawDevUseRate();
      this.drawDevTaskProgress();
      this.drawDevRunParams();
      this.drawTaskHis();
      this.drawTaskCompleteRate();
    },
    drawDevUseRate(){
      deviceUseRate(this.selectDevice).then(response=>{
        let devUseRate = this.$echarts.init(document.getElementById('devUseRate'));
        devUseRate.setOption(this.devUseRateOption(response.data))
      })
    },
    drawDevTaskProgress() {
      deviceTaskProgress(this.selectDevice).then(response=>{
        let devTask = this.$echarts.init(document.getElementById('devTask'));
        devTask.setOption(this.devTaskOption(response.data))
      })
    },
    devUseRateOption(data) {
      return {
        title: {
          text: '设备利用率',
          left: 'right'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              {value: data.devClose, name: '关机占比'},
              {value: data.devPrepare, name: '待运行占比'},
              {value: data.devRunning, name: '运行占比'},
              {value: data.devWaiting, name: '待机占比'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    },
    devTaskOption(data){
      return  {
        title: {
          text: '当前任务进度',
          left: 'right'
        },
        series: [{
          type: 'gauge',
          axisLine: {
            lineStyle: {
              width: 10,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            },
            length: '80%',
            width: 3,
          },
          axisTick: {
            distance: -30,
            length: 4,
            lineStyle: {
              color: '#fff',
              width: 1
            }
          },
          splitLine: {
            distance: -30,
            length: 15,
            lineStyle: {
              color: '#fff',
              width: 1
            }
          },
          axisLabel: {
            color: 'auto',
            distance: 0,
            fontSize: 10
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} %',
            color: 'auto'
          },
          data: [{
            value: data.rate,
            name: data.taskNo
          }]
        }]
      };
    },
    drawDevRunParams() {
      devRunParams(this.selectDevice).then(response=>{
        this.deviceRunParams = response.data;
      })
    },
    drawTaskHis() {
      taskHisWithDev(this.selectDevice).then(response=>{
        this.taskHis = response.data;
      })
    },
    drawTaskCompleteRate() {
      taskCompleteRate(this.selectDevice).then(response=>{
        this.taskCompleteRate = response.data;
      })
    },
    clearTimer() {
      console.log('destory timer')
    }
  }
}
</script>
